<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path",path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>地址管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="${path}/css/css.css" />
    <link rel="stylesheet" type="text/css" href="${path}/css/style.css" />
    <link rel="stylesheet" type="text/css" href="${path}/css/menu.css" />
    <link rel="stylesheet" type="text/css" href="${path}/css/address.css" />
    <script type="text/javascript"
            src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="${path}/layer/layer.js" type="text/javascript"></script>
    <script src="${path}/js/main.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/distpicker/2.0.3/distpicker.js"></script>
    <style type="text/css">
        .xxx{
            width: 75px;
            height: 34px;
            float: left;
            margin: 0 0 0 38px;
            border: 1px solid silver;
            line-height: 36px;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        function del(id){
            layer.confirm('确定要删除吗？', {
                btn: ['确定','取消'] //按钮
            }, function(){
                $.get("CategoryServlet/del?categoryId="+id,function (data) {
                    if (data==1){
                        location.reload();
                    }else {
                        layer.msg("该分类下有菜品不能删除");
                    }
                },"text");

            });
        }
        //修改方法
        function checkName(t) {
            //获取旧姓名和新姓名
            let oldName = $("#oldName").val();
            let name = $.trim(t.value);
            if(oldName == name){
                $("#msg").html("");
                $("#sub").attr("disabled", false);
            }else {
                if (name != "") {
                    //校验名字是否已经存在
                    $.get("CategoryServlet/cheName?name=" + name, function (data) {
                        if (data == 1) {
                            $("#msg").html("该菜品存在已经存在");
                            $("#sub").attr("disabled", true);
                        } else {
                            $("#msg").html("");
                            $("#sub").attr("disabled", false);
                        }
                    },"text");
                }
            }
        }
        /*添加菜品*/
        function addcheckName(t) {
            let name = $.trim(t.value);
            if (name != "") {
                //校验名字是否已经存在
                $.get("CategoryServlet/cheName?name=" + name, function (data) {
                    if (data == 1) {
                        $("#addmsg").html("该菜品存在已经存在");
                        $("#addsub").attr("disabled", true);
                    } else {
                        $("#addmsg").html("");
                        $("#addsub").attr("disabled", false);
                    }
                },"text");
            }else {
                layer.alert("菜品不能为空")
                $("#addmsg").html("");
                $("#addsub").attr("disabled", true);
            }
        }
    </script>
</head>
<body>
<div class="m-main">
    <div class="m-food">
        <div class="mf-top border-t">
            <div>
                分类管理
            </div>
        </div>
        <c:forEach items="${aList}" var="list" varStatus="i">
        <div class="mf-menu border-t"
             style="height: auto; line-height: normal; padding: 30px 0">

            <div class="fl">
                <span class="m-wt"></span>
                <span>${list.categoryName}</span>
            </div>
            <div class="fr dingwei">
                <button class="xiugai" onclick="change('category${i.count}',1)">
                    修改
                </button>
                <button class="del" onclick="del(${list.categoryId})">
                    删除
                </button>
            </div>

            <div id="update_category${i.count}" style="display: none;" class="change">
                <form action="${path}/CategoryServlet/updateCate" method="post">
                <div style="padding-top: 20px" class="clear">
                    <span class="m-wt" style="padding: 0 30px; width: 70px"></span>
                    <input type="hidden" id="oldName" class="t-ad" style="width: 150px"
                           value="${list.categoryName}" />
                    <input type="hidden" name="categoryId" class="t-ad" style="width: 150px"
                           value="${list.categoryId}" />
                    <input type="text" name="categoryName" class="t-ad" style="width: 150px"
                           value="${list.categoryName}" onblur="checkName(this)"/>
                    <span id="msg" style="color: red"></span>
                </div>

                <div class="act-botton clear"
                     style="margin: 10px 0 10px 15px; padding: 10px 0">
                    <div class="save-button">
                        <input type="submit" id="sub" class="xxx" value="保存"/>
                    </div>
                    <div class="cancel-button">
                        <a href="javascript:" class="radius"
                           onclick="change('category${i.count}',2)">取消</a>
                    </div>
                </div>
                </form>
            </div>

        </div>
        </c:forEach>
        <div class="mf-top" style="margin-top: 30px">
            <div id="addcategory">
                <div style="line-height: 40px">
                    <span class="m-wt" style="padding: 0 20px"></span><a href="#"
                                                                         class=" rb-red" onclick="change('addcategory',3)">+添加新分类</a>
                </div>
            </div>
            <div id="insert_addcategory" style="display: none;" class="change">
                <form action="${path}/CategoryServlet/addCate" method="post">
                <div style="padding-top: 20px" class="clear">
                    <span class="m-wt" style="padding: 0 30px; width: 70px"></span>
                    <input type="text" class="t-ad" style="width: 150px" name="categoryName" onblur="addcheckName(this)" placeholder="请输入分类名称" value="" />
                    <span id="addmsg" style="color: red"></span>
                </div>

                <div class="act-botton clear"
                     style="margin: 10px 0 10px 15px; padding: 10px 0">
                    <div class="save-button">
                        <input type="submit" id="addsub" class="xxx" style="height: 40px" value="保存"/>
                    </div>
                    <div class="cancel-button">
                        <a href="javascript:" class="radius"
                           onclick="change('addcategory',4)">取消</a>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<SCRIPT Language=VBScript><!--

//--></SCRIPT>